<template>
    <section :style="{background: isComponent ?'#fff':'#ECF0F5',paddingTop:isComponent? '0':'20px'}">
      <!--工具条-->
  
      <el-row :gutter="40">
        <el-col :sm="24" :lg="24">
          <div class="grid-content bg-purple" :style="{backgroundColor:titleColor}">
            <div v-if="custom_version==2" style="cursor: pointer;background:#fff;color:#0099cc;padding: 3px 6px;" class="dev-title">历史记录</div>
            <div v-if="custom_version==2" style="cursor: pointer;" class="dev-title" v-on:click="getPowerHistory">历史电量</div>
            <div v-if="custom_version!=2" style="cursor: pointer;" class="dev-title" v-on:click="getPowerHistory">历史曲线</div>
          </div>
          <div class="col-bg clearfix">
            <div style="overflow:hidden;">
              <!-- <div class="fr filter" style v-on:click="sbshow=!sbshow">设备筛选</div> -->
            </div>
            <el-form :inline="true" :model="filter" v-if="sbshow">
              <el-form-item>
                <el-input
                  v-model="filter.name"
                  placeholder="设备名称"
                  @keyup.enter.native="devicelistget()"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="filter.deviceSn"
                  placeholder="网关SN"
                  @keyup.enter.native="devicelistget()"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="filter.deviceTypeId"
                  filterable
                  placeholder="设备类型"
                  @change="devicelistget()"
                >
                  <el-option label="全选" value></el-option>
                  <el-option
                    v-for="item in typelist"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="filter.deviceModelId"
                  placeholder="网关型号"
                  @change="devicelistget()"
                >
                  <el-option key label="全选" value></el-option>
                  <el-option
                    v-for="item in modellist"
                    :key="item.modelId"
                    :label="item.name"
                    :value="item.modelId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-if="usertype==2"
                  v-model="scade1s"
                  filterable
                  placeholder="请选择组织"
                  @change="select_scade1()"
                >
                  <el-option label="全选" value=" "></el-option>
                  <el-option
                    v-for="item in firmlist"
                    :key="item.companyId"
                    :label="item.name"
                    :value="item.companyId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item>
                              <el-select v-model="scades" filterable placeholder="请选择子用户" @change="devicelistget()">
                                  <el-option :key="userID" label="当前账户" value=" ">
                                  </el-option>
                                  <el-option v-for="item in userclist" :key="item.userId" :label="item.userName"
                                      :value="item.userId">
                                  </el-option>
                              </el-select>
              </el-form-item>-->
              <!-- <el-form-item>
                <el-select v-model="terminalUser" placeholder="终端用户" @change="devicelistget()">
                  <el-option key label="全选" value=" "></el-option>
                  <el-option v-for="item in terminal_list" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item> -->
              <el-form-item>
                <el-select v-model="filters.dataType" placeholder="数据类型" @change="second">
                  <el-option key=" " label="全选" value=" "></el-option>
                  <el-option label="数值型" value="0"></el-option>
                  <el-option label="开关型" value="1"></el-option>
                  <el-option label="字符型" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select v-model="filters.unitId" @change="second" placeholder="数据单位">
                  <el-option label="全部" key value></el-option>
                  <el-option
                    v-for="item in unitList"
                    :label="item.name+' - '+item.value"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
         
              <el-form-item>
                <el-button :type="buttonColor" v-on:click="devicelistget()">设备查询</el-button>
              </el-form-item>
           
            </el-form>
            <el-form :inline="true" :model="filter" v-if="sbshow">
              
              <el-form-item>
                <!-- <el-select v-model="deviceGroupId" @change="groupChange" placeholder="设备分组"> -->
                <el-select v-model="deviceGroupName" @change="groupChange" placeholder="设备分组">
                  <!-- <el-option v-for="item in groupLists" :label="item.name" :value="item.id"></el-option> -->
                  <el-option disabled label='请选择分组'></el-option>
                  <el-option label='全部' value='全部'></el-option>
                  <el-tree
                      @node-click="getlists"
                      :data="groupList"
                      :props="defaultProps"
                      node-key="id"
                      default-expand-all
                      :expand-on-click-node="false"
                      ></el-tree>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button :type="buttonColor" v-on:click="groupChange()">分组查询</el-button>
              </el-form-item>
            </el-form>
            <div style="position: relative;">
            <el-form v-for="(list,index) in query" :inline="true" :model="filters" style="display: inline-block;">
              <el-form-item v-if="index==0&&!isComponent">
                <el-select
                  v-model="devicelists"
                  filterable
                  multiple
                  collapse-tags
                  placeholder="设备名称"
                  @change="second(index)"
                  style="width: 300px"
                >
                  <el-option
                    v-for="item in devicelist"
                    :key="item.deviceId"
                    :label="item.name"
                    :value="item.deviceId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-else>
                <el-select
                  v-model="list.deviceId"
                  disabled
                  placeholder="设备名称"
                  @change="second(index)"
                  style="width: 300px"
                >
                  <el-option
                    v-for="item in devicelist"
                    :key="item.deviceId"
                    :label="item.name"
                    :value="item.deviceId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="list.deviceSlaveId"
                  :value="list.device_name"
                  multiple
                  collapse-tags
                  placeholder="数据点"
                  @change="second2(list)"
                  style="width: 300px"
                >
                <!-- :value="item.slaveSn+ '-' +item.register+ '-' +item.deviceSlaveName" -->
                  <el-option
                    v-for="(item,index) in list.device_list"
                    :key="index"
                    :label="item.name"
                    :value="item.slaveSn+ '~' +item.register+ '~' +item.deviceSlaveName"
                    :disabled="disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
  
              <el-form-item>
                <el-button type="warning" v-on:click="allUsers(list)">数据点全选</el-button>
                <el-button type="warning" v-on:click="delUsers(list)">清空数据点</el-button>
              </el-form-item>
            </el-form>
              <div  class="filter" v-on:click="sbshow=!sbshow" v-if="!isComponent">设备筛选</div>
              <!-- <div  class="filter" v-on:click="getPowerHistory">历史电量</div> -->
            </div>
            <el-date-picker
              v-model="value4"
              @focus="second3()"
              @change="second1()"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions2"
              :default-time="['12:00:00', '08:00:00']"
            ></el-date-picker>
  
            <!-- <el-button :type="buttonColor" v-on:click="addUsers">新增</el-button> -->
            <el-button :type="buttonColor" v-on:click="getUsers" v-loading="charloading">记录查询</el-button>
            <!-- <el-button :type="buttonColor" v-on:click="getUsers1" v-loading="charloading">记录查询</el-button> -->
  
            <el-button type="danger" @click="editFormVisible=true">导出历史数据</el-button>
            <el-input
              v-model="echartitem.max"
              type="number"
              placeholder="Y轴最大值"
              style="width: 200px;margin: 5px 5px 5px 0"
            ></el-input>
            <el-input
              v-model="echartitem.min"
              type="number"
              placeholder="Y轴最小值"
              style="width: 200px;margin: 5px;"
            ></el-input>
  
            <el-button :type="buttonColor" @click="drawColumnChart()">XY查询</el-button>
            <el-col :span="24" v-loading="charloading">
              <!-- <el-button :type="buttonColor" v-on:click="gettimeLevel(0)" v-loading="charloading">原始</el-button>
              <el-button :type="buttonColor" v-on:click="gettimeLevel(1)" v-loading="charloading">分钟</el-button>
              <el-button :type="buttonColor" v-on:click="gettimeLevel(2)" v-loading="charloading">小时</el-button>
              <el-button :type="buttonColor" v-on:click="gettimeLevel(3)" v-loading="charloading">天</el-button>-->
              <el-radio-group v-model="timeLevel" @change="gettimeLevel">
                <el-radio :label="0">原始</el-radio>
                <el-radio :label="1">分钟</el-radio>
                <el-radio :label="2">小时</el-radio>
                <el-radio :label="3">天</el-radio>
              </el-radio-group>
            </el-col>
            <el-col :span="24" v-loading="charloading">
              <div id="chartColumn" style="width:100%; height:500px;"></div>
            </el-col>
            <div v-show="datalist>5000">数据量太大请耐心等待...</div>
          </div>
          <div v-if="!hdpishow" class="nav-tabs" style="margin-top: 20px">
            <el-tabs type="border-card" v-if="device_lists" @tab-click="handleClick">
              <el-tab-pane v-for="(item,index) in device_listsitem" v-if="item" :label="item.name +'['+ item.deviceSlaveName  +']'">
              <!-- <el-tab-pane v-for="(item,index) in device_listsitem" v-if="item" :label="item.name+ '('+item.devicename+')'+'['+ item.deviceSlaveName  +']'"> -->
                <span v-if="item.count<10000">
                  <!-- 1次查询最多返回10000条，本次查询记录为{{item.count}}条。 -->
                  1次查询最多返回10000条
                </span>
  
                <span v-if="item.count>=10000">1次查询最多返回10000条,本次查询记录为10000条,截止时间为：{{item.latest}}</span>
                <template >
                  <el-table :data="devicesson_list[index]" style="width: 100%;">
                    <el-table-column type="index" label="序号" width="80" :index="indexMethod"></el-table-column>
                    <el-table-column
                      header-align="center"
                      align="center"
                      prop="devicename"
                      label="设备名"
                    ></el-table-column>
                    <el-table-column header-align="center" align="center" prop="name" label="数据点名"></el-table-column>
                    <el-table-column
                      header-align="center"
                      align="center"
                      prop="registerVal"
                      label="数值"
                    ></el-table-column>
                    <el-table-column
                      header-align="center"
                      align="center"
                      prop="communicateState"
                      :formatter="formatState"
                      label="状态"
                    ></el-table-column>
                    <el-table-column
                      header-align="center"
                      align="center"
                      prop="pushTime"
                      label="时间"
                      width="200"
                    ></el-table-column>
                  </el-table>
                </template>
  
                <el-pagination
                  layout="prev, pager, next"
                  @current-change="handleCurrentChange"
                  :page-size="50"
                  :total="total[index]"
                  style="float:right;"
                ></el-pagination>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
        <el-dialog
          title="下载"
          v-show="editFormVisible"
          v-model="editFormVisible"
          @close="editFormVisible=false"
        >
          <div slot="footer" style="text-align: left; ">
            <el-form label-width="120px">
              <!-- <el-form-item label="下载图表类型">
                <el-select v-model="execType" filterable placeholder="设备类型">
                  <el-option key="0" label="分表" value="0"></el-option>
                  <el-option key="1" label="合并" value="1"></el-option>
                </el-select>
              </el-form-item>-->
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
              <el-button :type="buttonColor" @click.native="tableToExcel(0)" :loading="editLoading">分表下载</el-button>
              <el-button :type="buttonColor" @click.native="tableToExcel(1)" :loading="editLoading">合并下载</el-button>
            </div>
          </div>
        </el-dialog>
        <!--列表-->
        <!-- 
              <el-col :sm="24" :lg="8" style="padding-bottom: 0px;">
                  <div class="grid-content bg-purple">
                      <div class="dev-title">设备信息</div>
                  </div>
                  <ul class="panel-body dataHistory_ul ng-scope col-bg">
                      <li><label class="ng-binding">设备名称：</label><span class="ng-binding">{{users.name}}</span></li>
                      <li><label class="ng-binding">设备编号：</label><span class="ng-binding">{{users.deviceSn}}</span></li>
                      <li><label class="ng-binding">通讯协议：</label><span class="ng-binding">{{users.protocol}}</span></li>
                      <li><label class="ng-binding">所属用户：</label><span class="ng-binding">{{users.deviceUserName}}</span>
                      </li>
                  </ul>
  
                  <div v-if="!hdpishow" class="grid-content bg-purple" style="margin-top: 40px">
                      <div class="dev-title">设备地图</div>
                  </div>
                  <div v-if="!hdpishow" class="panel-body dataHistory_ul ng-scope col-bg">
                      <div id="allmap" ref="allmap"></div>
                  </div>
  
  
        </el-col>-->
      </el-row>
    </section>
  </template>
  
  <script>
  // import util from './../common/js/util'
  //import NProgress from 'nprogress'
  import {
    device_get,
    device_recipe_body_list,
    device_query,
    device_model_query,
    device_data_log_query_mutil,
    device_data_log_query_mutil1,
    device_type_query,
    device_data_log_dlexcel,
    terminal_user_query,
    user_query,
    user_temp_data_query,
    user_temp_data_delete,
    user_temp_data_post,
    user_querycompany,
    unit_query,
    device_group_query,
    device_company_group_query,
    device_query_mini
  } from "../../api/api";
  
  import echarts from "echarts";
  export default {
    props:{
        isComponent:{//判断当前页面是否被作为组件使用
            type: Boolean,
            default: false
        },
        componentDeviceId:{
            type: String,
        }
    },
    data() {
      return {
        deviceGroupName:'',
        defaultProps: {
                      children: "childrens",
                      label: "name"
                  },//树形控件配置
        toolboxText: "全屏显示",
        toolboxImg:"path://M186.527451 117.613714h-0.073142l147.017142-0.658285c21.723429 0.585143 41.837714-15.652571 45.129143-43.227429V43.885714C378.161737 20.406857 360.095451 1.024 338.372023 0.512L57.796023 2.194286C57.284023 2.267429 56.991451 2.048 56.625737 2.048L36.950309 1.609143A35.84 35.84 0 0 0 9.521737 13.458286C2.353737 21.065143-0.206263 31.597714 0.013166 43.373714l2.048 21.211429c0 0.438857-1.462857 0.731429-1.462857 1.170286l1.097142 303.689142c0.512 23.405714 18.505143 37.449143 40.228572 38.034286h29.257143c21.723429 0.512 39.058286-19.894857 38.546285-43.300571l-1.243428-165.156572L302.093166 404.041143c20.992 22.674286 55.076571 22.674286 76.068571 0a61.44 61.44 0 0 0 0-82.066286L186.527451 117.613714zM1021.233737 954.221714c0-0.512 1.462857-0.804571 1.462857-1.170285l-1.170285-299.081143c-0.585143-23.405714-18.505143-37.376-40.228572-37.888h-27.721143c-21.650286-0.585143-38.985143 19.821714-38.4 43.227428l1.243429 161.645715-193.536-206.409143a50.980571 50.980571 0 0 0-76.068572 0 61.293714 61.293714 0 0 0 0 82.139428l193.462858 206.262857-146.797715 0.585143c-21.723429-0.512-41.837714 13.897143-45.202285 41.472v29.842286c0.585143 23.405714 18.578286 42.861714 40.228571 43.446857l277.138286-1.828571c0.438857 0 0.731429 0.219429 1.097143 0.219428l19.602285 0.512a35.84 35.84 0 0 0 27.648-11.922285c7.094857-7.460571 9.581714-18.066286 9.362286-29.842286l-2.194286-21.211429zM378.161737 614.546286a50.980571 50.980571 0 0 0-76.068571 0l-193.609143 205.092571 1.243428-162.669714c0.512-23.405714-16.822857-43.885714-38.4-43.300572h-29.257142c-21.796571 0.585143-39.789714 14.555429-40.228572 38.034286l-1.170286 301.202286c0 0.438857 1.462857 0.731429 1.462858 1.170286l-2.121143 21.211428c-0.219429 11.776 2.340571 22.381714 9.362285 29.842286a35.84 35.84 0 0 0 27.501715 11.922286l19.748571-0.512c0.365714 0 0.658286-0.219429 1.097143-0.219429l280.649143 1.828571c21.723429-0.585143 39.716571-19.968 40.228571-43.446857v-29.842285c-3.291429-27.648-23.405714-41.984-45.129143-41.472l-148.699428-0.512 193.389714-206.262858a61.366857 61.366857 0 0 0 0-82.066285zM1013.992594 13.458286a35.766857 35.766857 0 0 0-27.574857-11.849143l-19.602286 0.512c-0.438857 0-0.731429 0.146286-1.170285 0.219428L684.630309 0.512C662.833737 1.097143 644.913737 20.48 644.401737 43.885714v29.915429c3.291429 27.648 23.478857 43.812571 45.129143 43.227428l149.211429 0.731429-191.634286 204.361143a61.147429 61.147429 0 0 0-0.146286 81.92c21.065143 22.747429 55.076571 22.747429 76.068572 0l193.536-206.262857-1.243429 166.4c-0.512 23.405714 16.822857 43.885714 38.473143 43.373714h27.648c21.723429-0.658286 39.716571-14.628571 40.228571-38.034286L1022.696594 65.828571c0-0.438857-1.462857-0.731429-1.462857-1.170285l2.194286-21.211429c0.219429-11.776-2.340571-22.381714-9.435429-29.915428z",
        editFormVisible: false,
        datalist: 0,
        userID: "",
        templist: [],
        scade1s: "",
        scades: "",
        terminal_list: "",
        userclist: "",
        firmlist: "",
        usertype: "",
        echartitem: {
          max: "",
          min: ""
        },
        area: "",
        industry: "",
        address: "",
        cityDatas: "",
        cityData: "",
        modellist: "",
        typelist: "",
        pickerOptions2: {
          shortcuts: [
            {
              text: "最近1小时",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 1);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近24小时",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              }
            }
          ]
        },
        tableData: [],
        devicelists: [],
        devicelist: "",
        deviceSlavelist: "",
        alarmtype: "",
        value4: [],
        terminalUser: "",
        filter: {
          name: "",
          deviceTypeId: null,
          deviceSn: null,
          deviceModelId: null,
          terminalUser: null,
          guild: "",
          area: "",
          address: "",
          dataType: ""
        },
        filters: {
          deviceId: "",
          deviceSlaveId: "",
          alarmTypeId: [],
          state: "",
          startTime: "",
          endTime: "",
          unitId: ""
        },
        query: [
          {
            deviceId: "",
            deviceSlaveId: [],
            device_list: "",
            device_name: [],
            deviceDataRecipeId: ""
          }
        ],
        page: 1,
        listLoading: false,
        sels: [], //列表选中列
        unitList: "", //单位列表
        editFormVisible: false, //编辑界面是否显示
        editLoading: false,
        editFormRules: {
          name: [
            {
              required: true,
              message: "请输入姓名",
              trigger: "blur"
            },
            { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
          ]
        },
        //编辑界面数据
        editForm: {
          id: "",
          state: "",
          remark: ""
        },
  
        addFormVisible: false, //新增界面是否显示
        addLoading: false,
        addFormRules: {
          name: [
            {
              required: true,
              message: "请输入姓名",
              trigger: "blur"
            },
            { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
          ],
          path: [
            {
              required: true,
              message: "请输入path",
              trigger: "blur"
            }
          ]
        },
        //新增界面数据
        addForm: {
          name: "",
          phone: "",
          email: "",
          weixin: "",
          remark: ""
        },
        chartColumn: null,
        users: "",
        device_list: "",
        device_lists: [],
        device_listsitem: [],
        facility: "",
        devices_name: [],
        devices_time: [],
        devices_series: [],
        fullscreenLoading: true,
        disabled: false,
        hdpishow: false,
        devicesson_list: "",
        devicesson_size: 1,
        total: [],
        charloading: false,
        listlength: 1,
        namelist: 0,
        latest: [],
        scades: "",
        execType: "0",
        sbshow: true, //设备筛选显示隐藏
        timeLevel: 0, //
        groupList: "",
        groupLists: "",
        deviceGroupId: "",
        custom_version: this.CustomVersion()
      };
    },
    computed:{
            buttonColor(){
                return this.$store.state.buttonColor
            },
            titleColor(){
                return this.$store.state.titleColor
            },
            dialogTitleColor(){
                return this.$store.state.dialogTitleColor
            },
        },
    methods: {
      getPowerHistory(){
        this.$router.push({path:'/devices/powerhistory'})
      },
      groupChange(e) {
        console.log(this.deviceGroupId)
        console.log(this.deviceGroupName)
        if(this.deviceGroupName == '全部'){
          this.devicelistget()
        }else{
        this.sbshow = !this.sbshow
        let para = {
          deviceGroupId: this.deviceGroupId,
          pageNo: 1,
          pageSize: 1000
        };
        this.listLoading = true;
        //NProgress.start();
        device_company_group_query(para).then(res => {
          this.begCode(res.code, res.message);
          this.devicelist = res.data.list;
  
          this.listLoading = false;
          //NProgress.done();
        });
        }
      },
      getlists(s, d, t){
              console.log(s)
              this.deviceGroupName = s.name
              this.deviceGroupId = s.id
              this.groupChange()
          },
      getGroup() {
        let para = {
          pageNo: this.page,
          pageSize: 1000
        };
        this.listLoading = true;
        //NProgress.start();
        device_group_query(para).then(res => {
          this.begCode(res.code);
          // this.total = res.data.totalCount;
          this.groupList = res.data;
  
          this.groupLists = [{ id: 0, name: "默认" }];
          this.getrecursion(res.data);
          this.listLoading = false;
          //NProgress.done();
        });
      },
      getrecursion(data) {
        for (var i in data) {
          this.groupLists.push(data[i]);
          OUT:
          if (!data[i].childrens) {
            break OUT;
          } else {
            this.getrecursion(data[i].childrens);
          }
        }
        // console.log(this.querys)
      },
      gettimeLevel(s) {
        this.timeLevel = s;
        console.log(s);
        this.getUsers(this.timeLevel);
      },
      select_scade1(s) {
        // this.initialize();
        let para = {
          pageNo: 1,
          pageSize: 9999,
          type: 0,
          companyId: this.scade1s,
          authType: 0
        };
        this.scades = "";
        user_query(para).then(res => {
          this.begCode(res.code, res.message);
          this.userclist = res.data.list;
          console.log(this.scades);
          if (this.scades) {
            this.userID = this.scades;
          } else {
            this.userID = 0;
            console.log(this.userID);
          }
        });
      },
      download(data, name) {
        console.log(data);
        if (!data) {
          return;
        }
        let url = window.URL.createObjectURL(new Blob([data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        console.log(link);
        link.setAttribute("download", name + ".xlsx");
  
        document.body.appendChild(link);
        link.click();
        this.editFormVisible = false;
      },
      formatState(row, column) {
        return row.communicateState == 0 ? "正常" : "故障";
      },
      tableToExcel(s) {
        this.listlength = 0;
        for (let i in this.query) {
          for (let j in this.query[i].deviceSlaveId) {
            this.listlength++;
            // if (this.listlength > 20) {
            //     this.$message({
            //         message: '数据点一次最多只能选择20个',
            //         type: 'warning'
            //     });
            //     return false;
            // }
          }
          let para1 = {
            deviceId: this.query[i].deviceId,
            slaveList: this.query[i].deviceSlaveId
          };
  
          if (para1.slaveList == "" || para1.deviceId == "") {
            console.log("请选择设备和数据点");
            this.$message({
              message: "请选择设备和数据点",
              type: "warning"
            });
            return false;
          }
        }
        for (let i in this.query) {
          let para1 = {
            deviceId: this.query[i].deviceId,
            slaveList: this.query[i].slaveList,
            startTime: this.filters.startTime,
            endTime: this.filters.endTime,
            pageNo: 1,
            pageSize: 9999,
            type: s
          };
  
          if (para1.slaveList == "" || para1.deviceId == "") {
            console.log("请选择设备和数据点");
            this.$message({
              message: "请选择设备和数据点",
              type: "warning"
            });
            return false;
          }
          this.editLoading = true
  
          device_data_log_dlexcel(para1)
            .then(s => {
              console.log(this.query[i]);
              this.download(s, this.query[i].name);
              this.editLoading = false
            })
            .catch(() => {});
        }
      },
      base64(s) {
        return window.btoa(unescape(encodeURIComponent(s)));
      },
      delUsers(s) {
        s.deviceSlaveId = [];
      },
      allUsers(s) {
        console.log(s);
        s.deviceSlaveId = [];
        for (let i in s.device_list) {
          if (
            s.device_list[i].unitType == this.filters.unitId ||
            this.filters.unitId == ""
          ) {
            s.deviceSlaveId.push(s.device_list[i].slaveSn+'~'+s.device_list[i].register+'~'+s.device_list[i].deviceSlaveName);
          }
        }
        this.second2(s);
      },
      addUsers() {
        // if (this.query.length == 20) {
        //     this.$message({
        //         message: '设备最多只能选择20个',
        //         type: 'warning'
        //     });
        //     this.devicelists.pop()
        //     return false
        // }
  
        this.query.push({
          deviceId: "",
          deviceSlaveId: [],
          device_list: ""
        });
      },
      map1() {
        let map = new BMap.Map(this.$refs.allmap); // 创建Map实例
        // map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
        map.enableScrollWheelZoom();
        map.centerAndZoom(
          new BMap.Point(
            this.facility.deviceLocation.longitude,
            this.facility.deviceLocation.latitude
          ),
          11
        ); // 初始化地图,设置中心点坐标和地图级别
        map.addControl(
          new BMap.MapTypeControl({
            //添加地图类型控件
            mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
          })
        );
  
        // var map = new BMap.Map("container");
        var point = new BMap.Point(
          this.facility.deviceLocation.longitude,
          this.facility.deviceLocation.latitude
        );
  
        let s = this.convert(point);
        map.centerAndZoom(s, 15);
        var marker = new BMap.Marker(s); // 创建标注
        map.addOverlay(marker);
        var opts = {
          width: 200, // 信息窗口宽度
          height: 100, // 信息窗口高度
          title: "地址信息", // 信息窗口标题
          enableMessage: true, //设置允许信息窗发送短息
          message: this.facility.deviceLocation.address + "~"
        };
        var infoWindow = new BMap.InfoWindow(opts.message, opts); // 创建信息窗口对象
        map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
        map.addOverlay(marker); // 将标注添加到地图中
  
        var infoWindow = new BMap.InfoWindow(
          "地址:" + this.facility.deviceLocation.address,
          opts
        ); // 创建信息窗口对象
        marker.addEventListener("click", function() {
          map.openInfoWindow(infoWindow, s); //开启信息窗口
        });
  
        // map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
        // map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      },
      getUrlKey: function(name) {
        return (
          decodeURIComponent(
            (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
              location.href
            ) || [, ""])[1].replace(/\+/g, "%20")
          ) || null
        );
      },
      drawColumnChart() {
        console.log(this.devices_series);
        let max = 100;
        let min = 0;
        let stardata = {
          type: "slider",
          yAxisIndex: 0,
          filterMode: "empty",
          // startValue: 0,
          // endValue: 10,
          realtime: true,
          backgroundColor: '#fff',//两边未选中的滑动条区域的颜色
          fillerColor: '#fff', //进度条颜色
          showDetail:false, //隐藏滚动条文字显示
        };
        if (this.echartitem.max) {
          max = parseInt(this.echartitem.max);
        }
        if (this.echartitem.min) {
          min = parseInt(this.echartitem.min);
        }
        if (this.echartitem.max && this.echartitem.min) {
          stardata = {
            type: "slider",
            yAxisIndex: 0,
            filterMode: "empty",
            // startValue: 0,
            // endValue: 10,
            endValue: max,
            startValue: min,
            realtime: true,   
            backgroundColor: '#fff',//两边未选中的滑动条区域的颜色
            fillerColor: '#fff', //进度条颜色
            showDetail:false, //隐藏滚动条文字显示
          };
        }
        console.log(max);
        console.log(min);
        let chartColumn = echarts.init(document.getElementById("chartColumn"));
         window.onresize = () => {
                  return (() => {
                      chartColumn.resize();
                      // _this.drawColumnChart()
                  })()
              }
        this.$nextTick(function() {
          chartColumn.setOption(
            {
              legend: {
                data: this.devices_name,
                // right :'50%',
                left: "15%",
                width: "70%"
              },
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "cross",
                  animation: false
                }
              },
              plotOptions: {
                series: {
                  animation: false,
                  marker: {
                    enabled: false,
                    states: {
                      hover: {
                        enabled: false
                      }
                    }
                  },
                  enableMouseTracking: false
                }
              },
              dataZoom: [
                {
                  type: "slider",
                  show: false,
                  xAxisIndex: 0,
                  // yAxisIndex: [0],
                  left: "96%",
                  bottom: "5%",
                  // start: 0,
                  // end: 100,
                },
                {
                  type: "slider",
                  xAxisIndex: 0,
                  filterMode: "empty",
                  // borderColor: "#000", //边框颜色
                  backgroundColor: 'transparent',//两边未选中的滑动条区域的颜色
                  fillerColor: 'transparent', //进度条颜色
                  showDetail:false, //隐藏滚动条文字显示
                  realtime: true
                },
                stardata,
              ],
              toolbox: {
                show: true,
                feature: {
                  dataZoom: {
                    yAxisIndex: "none"
                  },
                  restore: {},
                  saveAsImage: {},
                  myFull: {
                    show: true,
                    // title:'全屏显示',
                    title: this.toolboxText,
                    icon: this.toolboxImg,
                      // "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
                      // "path://M883.138896 944.458281v-95.818015l156.169033 155.583229a63.199004 63.199004 0 0 0 44.878372 18.707182 63.20166 63.20166 0 0 0 44.883687-18.707182c24.818929-24.915899 24.818929-65.207472 0-90.126027l-155.443753-155.588543h95.598838c44.012287 0 79.691822-35.676878 79.691822-79.689166 0-44.013616-35.679535-79.690494-79.691822-79.690494h-291.905355a52.760814 52.760814 0 0 0-37.691989 15.327854 52.732918 52.732918 0 0 0-15.58024 37.583064V944.458281c0 43.929929 35.611789 79.54039 79.545703 79.540391 43.928601 0 79.545704-35.610461 79.545704-79.540391zM391.972769 79.50851v95.818016L235.803736 19.743296a63.197675 63.197675 0 0 0-89.762059 0c-24.824242 24.937152-24.824242 65.255293 0 90.197758l155.443753 155.588543h-95.600166C161.871648 265.530926 126.193441 301.209132 126.193441 345.22142s35.678207 79.690494 79.690494 79.690494h291.905355a52.768784 52.768784 0 0 0 53.273558-52.910918V79.581569c0.021254-43.928601-35.574595-79.561644-79.50851-79.581569-43.928601-0.01594-79.560315 35.579909-79.581569 79.50851zM973.627563 265.493732L1129.069988 109.905189c24.818929-24.917227 24.818929-65.2088 0-90.126028a63.196347 63.196347 0 0 0-89.762059 0L883.138896 175.363719v-95.818015c0-43.928601-35.617103-79.545704-79.547032-79.545704-43.932586 0-79.545704 35.617103-79.545704 79.545704V371.965131a52.758157 52.758157 0 0 0 53.272229 52.905604h291.905355c44.012287 0 79.693151-35.678207 79.693151-79.690494 0-44.006974-35.680863-79.685181-79.693151-79.685181h-95.596181zM497.78929 599.130594h-291.905355c-44.012287 0-79.690494 35.676878-79.690494 79.690494 0 44.012287 35.678207 79.689166 79.690494 79.689165h95.600166l-155.443752 155.588543c-24.818929 24.918555-24.818929 65.210129 0 90.124699a63.189705 63.189705 0 0 0 89.762059 0l156.169032-155.583229V944.458281c0 43.931258 35.617103 79.541719 79.545704 79.541719 43.933914 0 79.545704-35.610461 79.545704-79.541719V652.041511a52.73956 52.73956 0 0 0-15.581569-37.583064 52.76347 52.76347 0 0 0-37.691989-15.327853z",
                      // "path://M186.527451 117.613714h-0.073142l147.017142-0.658285c21.723429 0.585143 41.837714-15.652571 45.129143-43.227429V43.885714C378.161737 20.406857 360.095451 1.024 338.372023 0.512L57.796023 2.194286C57.284023 2.267429 56.991451 2.048 56.625737 2.048L36.950309 1.609143A35.84 35.84 0 0 0 9.521737 13.458286C2.353737 21.065143-0.206263 31.597714 0.013166 43.373714l2.048 21.211429c0 0.438857-1.462857 0.731429-1.462857 1.170286l1.097142 303.689142c0.512 23.405714 18.505143 37.449143 40.228572 38.034286h29.257143c21.723429 0.512 39.058286-19.894857 38.546285-43.300571l-1.243428-165.156572L302.093166 404.041143c20.992 22.674286 55.076571 22.674286 76.068571 0a61.44 61.44 0 0 0 0-82.066286L186.527451 117.613714zM1021.233737 954.221714c0-0.512 1.462857-0.804571 1.462857-1.170285l-1.170285-299.081143c-0.585143-23.405714-18.505143-37.376-40.228572-37.888h-27.721143c-21.650286-0.585143-38.985143 19.821714-38.4 43.227428l1.243429 161.645715-193.536-206.409143a50.980571 50.980571 0 0 0-76.068572 0 61.293714 61.293714 0 0 0 0 82.139428l193.462858 206.262857-146.797715 0.585143c-21.723429-0.512-41.837714 13.897143-45.202285 41.472v29.842286c0.585143 23.405714 18.578286 42.861714 40.228571 43.446857l277.138286-1.828571c0.438857 0 0.731429 0.219429 1.097143 0.219428l19.602285 0.512a35.84 35.84 0 0 0 27.648-11.922285c7.094857-7.460571 9.581714-18.066286 9.362286-29.842286l-2.194286-21.211429zM378.161737 614.546286a50.980571 50.980571 0 0 0-76.068571 0l-193.609143 205.092571 1.243428-162.669714c0.512-23.405714-16.822857-43.885714-38.4-43.300572h-29.257142c-21.796571 0.585143-39.789714 14.555429-40.228572 38.034286l-1.170286 301.202286c0 0.438857 1.462857 0.731429 1.462858 1.170286l-2.121143 21.211428c-0.219429 11.776 2.340571 22.381714 9.362285 29.842286a35.84 35.84 0 0 0 27.501715 11.922286l19.748571-0.512c0.365714 0 0.658286-0.219429 1.097143-0.219429l280.649143 1.828571c21.723429-0.585143 39.716571-19.968 40.228571-43.446857v-29.842285c-3.291429-27.648-23.405714-41.984-45.129143-41.472l-148.699428-0.512 193.389714-206.262858a61.366857 61.366857 0 0 0 0-82.066285zM1013.992594 13.458286a35.766857 35.766857 0 0 0-27.574857-11.849143l-19.602286 0.512c-0.438857 0-0.731429 0.146286-1.170285 0.219428L684.630309 0.512C662.833737 1.097143 644.913737 20.48 644.401737 43.885714v29.915429c3.291429 27.648 23.478857 43.812571 45.129143 43.227428l149.211429 0.731429-191.634286 204.361143a61.147429 61.147429 0 0 0-0.146286 81.92c21.065143 22.747429 55.076571 22.747429 76.068572 0l193.536-206.262857-1.243429 166.4c-0.512 23.405714 16.822857 43.885714 38.473143 43.373714h27.648c21.723429-0.658286 39.716571-14.628571 40.228571-38.034286L1022.696594 65.828571c0-0.438857-1.462857-0.731429-1.462857-1.170285l2.194286-21.211429c0.219429-11.776-2.340571-22.381714-9.435429-29.915428z",
                    onclick: function(e) {
                      console.log(e);
                      const element = document.getElementById("chartColumn");
  
                      // if(element.style.width == document.documentElement.clientWidth+ "px" && element.style.height == document.documentElement.clientHeight + "px"){
                      //   element.style.width = '100%'
                      //   element.style.height = '500px'
                      //   element.style.position = 'relative';
                      //   element.style.zIndex = '0';
                      //   // console.log('不全屏')
                      // }else {
                      //   // console.log('全屏')
                      //     element.style.width = document.documentElement.clientWidth + "px";
                      //     element.style.height = document.documentElement.clientHeight + "px";
                      //     element.style.position = 'fixed';
                      //     element.style.left = '0px';
                      //     element.style.top = '0px';
                      //     element.style.zIndex = '9999';
                      //     element.style.background = '#fff';
                      //     console.log(e.option.toolbox[0].feature.myFull.title)
                      // }
  
                      // function isFullscreen(){//判断是否全屏
                      //     return document.fullscreenElement   ||
                      //           document.msFullscreenElement  ||
                      //           document.mozFullScreenElement ||
                      //           document.webkitFullscreenElement || false;
                      // }
  
                      if (element.requestFullScreen) {
                        // HTML W3C 提议
                        element.requestFullScreen();
                        window.onresize = function() {
                          chartColumn.resize();
                        };
                      } else if (element.msRequestFullscreen) {
                        // IE11
                        element.msRequestFullScreen();
                        window.onresize = function() {
                          chartColumn.resize();
                        };
                      } else if (element.webkitRequestFullScreen) {
                        // Webkit (works in Safari5.1 and Chrome 15)
                        element.webkitRequestFullScreen();
                        window.onresize = function() {
                          chartColumn.resize();
                        };
                      } else if (element.mozRequestFullScreen) {
                        // Firefox (works in nightly)
                        element.mozRequestFullScreen();
                        window.onresize = function() {
                          chartColumn.resize();
                        };
                      }
                      // 退出全屏
                      if (element.requestFullScreen) {
                        document.exitFullscreen();
                        window.onresize = function() {
                          chartColumn.resize();
                        };
                      } else if (element.msRequestFullScreen) {
                        document.msExitFullscreen();
                        window.onresize = function() {
                          chartColumn.resize();
                        };
                      } else if (element.webkitRequestFullScreen) {
                        document.webkitCancelFullScreen();
                        window.onresize = function() {
                          chartColumn.resize();
                        };
                      } else if (element.mozRequestFullScreen) {
                        document.mozCancelFullScreen();
                        window.onresize = function() {
                          chartColumn.resize();
                        };
                      }
                      // console.log(isFullscreen())
                      // if(isFullscreen() == false){
                      //   e.option.toolbox[0].feature.myFull.title = '取消全屏显示'
                      // }else{
                      //   e.option.toolbox[0].feature.myFull.title = '全屏显示'
                      // }
                    }
                  }
                }
              },
              grid: {
                top: 70,
                bottom: 50
              },
              xAxis: {
                type: "time",
                name: "时间",
                nameTextStyle: {
                  color: "#333"
                },
                boundaryGap: true,
                data: []
              },
              yAxis: {
                name: "数据点值",
                type: "value",
                nameTextStyle: {
                  color: "#333"
                }
              },
              series: this.devices_series
            },
            true
          );
  
          chartColumn.on("click", this.eConsole);
          //   function isFullscreen(){
          //                   return document.fullscreenElement   ||
          //                         document.msFullscreenElement  ||
          //                         document.mozFullScreenElement ||
          //                         document.webkitFullscreenElement || false;
          //               }
          //   window.addEventListener('resize', () => {
          //     // console.log(isFullscreen())
          //     console.log(isFullscreen())
          //     if(isFullscreen() == false){
          //       this.toolboxText = '全屏显示'
          //       chartColumn.resize()
          //     }else{
          //       this.toolboxText = '取消全屏显示'
          //       chartColumn.resize()
          //     }
          // })
        });
      },
      eConsole(s) {
        console.log(s);
      },
  
      getdata(date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        var h = date.getHours();
        h = h < 10 ? "0" + h : h;
        var minute = date.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        var second = date.getSeconds();
        second = second < 10 ? "0" + second : second;
        return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
      },
      //性别显示转换
      second3() {},
      second1() {
        if (this.value4) {
          this.filters.startTime = this.getdata(this.value4[0]);
          this.filters.endTime = this.getdata(this.value4[1]);
        } else {
          this.filters.startTime = "";
          this.filters.endTime = "";
        }
      },
      evlabc(arr) {
        //排序大小
        for (var i = 1; i < arr.length; i++) {
          //内层循环：控制每轮比较次数  数组长度-i
          for (var j = 0; j < arr.length - i; j++) {
            //如果当前的元素(j)大于下一个元素(j+1)，则交换位置
            if (arr[j] > arr[j + 1]) {
              var t = arr[j];
              arr[j] = arr[j + 1];
              arr[j + 1] = t;
            }
          }
        }
        return arr;
      },
      evlabc2(arr){
        //排序大小
        for (var q = 1; q < arr.length; q++) {
          //内层循环：控制每轮比较次数  数组长度-q
          for (var w = 0; w < arr.length - q; w++) {
         //   console.log(arr[w].slaveSn+'~'+arr[w].register+'~'+arr[w].deviceSlaveName)
         //   console.log(arr[w].slaveSn+'~'+arr[w + 1].register+'~'+arr[w+1].deviceSlaveName)
            if (arr[w].slaveSn+'~'+arr[w].register+'~'+arr[w].deviceSlaveName > arr[w+1].slaveSn+'~'+arr[w + 1].register+'~'+arr[w+1].deviceSlaveName) {
              var y = arr[w];
              arr[w] = arr[w + 1];
              arr[w + 1] = y;
            }
          }
        }
        return arr;
      },
      second2(val) {
        for (let i in val.deviceSlaveId) {
        }
        val.deviceSlaveId = this.evlabc(val.deviceSlaveId);
        console.log(val);
        val.slaveSn = [];
        val.slaveList = [];
        val.slaveItem = [];
        for (let i in val.deviceSlaveId) {
          let obj = "";
          obj = val.device_list.find(item => {
            return item.slaveSn+ '~' +item.register+'~'+item.deviceSlaveName === val.deviceSlaveId[i];
          });
        console.log(obj)
          val.slaveSn[i] = obj.slaveSn;
          val.slaveItem[i] = {
            name: obj.name,
            decimalAccuracy: obj.decimalAccuracy
          };
          val.slaveList[i] = {
            slaveSn: val.slaveSn[i],
            register: val.deviceSlaveId[i].split('~')[1]
          };
          console.log(val);
        }
  
        // this.wareHouseVO2.goodsLocationName = obj.locationName;
        // if (this.filters.alarmTypeId.length > 5) {
        //     this.filters.alarmTypeId.pop()
        //     // this.disabled=true;
        //     this.$message({
        //         message: '数据点一次查询最多只能选择5个',
        //         type: 'warning'
        //     });
        //     console.log(this.filters.alarmTypeId)
        // }
      },
      second(s) {
        // deviceSlaveId
        console.log(s)
        console.log(this.filter);
        let num = JSON.parse(JSON.stringify(this.query));
        console.log(num);
        this.query = [];
        console.log(this.query);
        console.log(this.devicelists);
        for (let i in this.devicelists) {
          this.addUsers();
          //     this.query[i]={
          //     deviceId: '',
          //     deviceSlaveId: [],
          //     device_list: ''
          // }
          //找到选中的设备
          let obj = "";
          obj = this.devicelist.find(item => {
            return item.deviceId === this.devicelists[i];
          });
          //this.templist：当前登录用户的历史记录数据
          if (this.templist) {
            console.log(this.templist);
            console.log(this.query[i]);
            for (let j in this.templist) {
              if (obj.deviceSlaveList[0].deviceDataRecipeId == this.templist[j].dataType) {
                this.query[i].deviceSlaveId = JSON.parse(this.templist[j].data);
              }
            }
          }
            console.log(num);
          for (let k in num) {
            if (num[k].deviceId == this.devicelists[i]) {
              this.query[i].deviceSlaveId = num[k].deviceSlaveId;
              break;
            }
          }
          // if (num[i]) {
          //     if (num[i].deviceSlaveId.length > 0) {
          //         if(num[i].deviceId!=this.devicelists[i]){
          //             console.log(num[i])
          //             console.log(this.devicelists[i])
          //         }else{
  
          //             this.query[i].deviceSlaveId = num[i].deviceSlaveId;
          //         }
          //         console.log(this.query[i].deviceSlaveId)
          //         console.log(num[i])
          //     }
  
          // }
          this.query[i].deviceDataRecipeId =
            obj.deviceSlaveList[0].deviceDataRecipeId;
          // alert(this.query[i])
          this.query[i].name = obj.name;
          this.query[i].deviceId = this.devicelists[i];
  
          let para = {
            deviceId: this.query[i].deviceId
          };
  
          this.query[i].device_list = [];
  
          
          device_recipe_body_list(para)
            .then(res => {
              console.log(this.query[i].device_list);
              this.query[i].device_list = [];
              for (let j in res.data) {
                if (
                  res.data[j].dataType == this.filters.dataType ||
                  !this.filters.dataType
                ) {
                  if (
                    res.data[j].unitType == this.filters.unitId ||
                    this.filters.unitId == ""
                  ) {
                    this.query[i].device_list.push(res.data[j]);
                  }
                }
              }
              console.log(this.query[i].device_list);
              if(this.devicelists.length == 1){
                this.query[i].device_list = this.evlabc2(this.query[i].device_list)
              }
              this.second2(this.query[i]);
              sessionStorage.removeItem("pointid");
            })
            .catch(() => {
              // this.$message({
              //     message: '网络超时,请刷新重试',
              //     type: 'warning'
              // });
            });
          console.log(this.query);
        }
        if (this.devicelists.length == 0) {
          this.query = [
            {
              deviceId: "",
              deviceSlaveId: [],
              device_list: "",
              device_name: []
            }
          ];
        }
  
        // this.query[s].deviceSlaveId = [];
      },
      formatSex: function(row, column) {
        return row.sex == 1 ? "男" : row.sex == 0 ? "女" : "未知";
      },
      handleClick(tab, event) {
        console.log(tab, event);
        this.devicesson_size = 1;
        this.son_slice();
      },
      indexMethod(index) {
        let num = (this.devicesson_size - 1) * 50 + index + 1;
        return num;
      },
      handleCurrentChange(val) {
        this.devicesson_size = val;
        console.log(val);
        this.son_slice();
      },
      //获取菜单列表
  
      getUsers(s) {
        console.log(s)
        
        this.listlength = 0;
        for (let i in this.query) {
          for (let j in this.query[i].deviceSlaveId) {
            console.log(this.query[i])
            this.listlength++;
            if (this.listlength > 10) {
              this.$message({
                message: "数据点一次最多只能选择10个",
                type: "warning"
              });
              return false;
            }
          }
        }
        this.datalist = 0;
        this.namelist = 0;
        let itemnum = [];
        this.devicesson_list = [];
        this.devices_name = [];
        this.devices_time = [];
        this.devices_series = [];
        this.device_listsitem = [];
        this.latest = [];
        this.device_lists = [];
        this.tableData = [];
        if (!this.query[0].deviceId) {
          this.query[0].deviceId = sessionStorage.getItem("facility_details");
          this.second();
          this.devicelists = [sessionStorage.getItem("facility_details")];
        }
        let para = {
          deviceId: this.query[0].deviceId
        };
        this.loading = true;
        //NProgress.start();
        if (!para.deviceId) {
          this.devicelists = [];
          this.$message({
            message: "请选择设备",
            type: "warning"
          });
          return false;
        }
        device_get(para).then(res => {
          // res.code=403;
          this.begCode(res.code, res.message);
          this.users = res.data;
          this.facility = res.data;
          this.devicesson_size = 1;
        });
  
        // device_recipe_body_list(para).then((res) => {
  
        // this.begCode(res.code, res.message);
  
        console.log(this.query[0].name);
        console.log(this.query);
        // this.query[0].device_list = res.data;
        for (let i in this.query) {
          for (let j in this.query[i].device_list) {
            for (let k in this.query[i].deviceSlaveId) {
              if (
                this.query[i].deviceSlaveId[k].split("~")[1] ==
                this.query[i].device_list[j].register
              ) {
                console.log(this.query[i]);
                this.device_lists[
                  this.query[i].device_list[j].slaveSn +
                    ":" +
                    this.query[i].device_list[j].register
                ] = this.query[i].device_list[j];
              }
            }
          }
        }
        console.log(this.listlength);
        console.log(this.device_lists);
        // return false;
        let dateDiff =
          new Date(this.filters.endTime.replace(/-/g, "/")).getTime() -
          new Date(this.filters.startTime.replace(/-/g, "/")).getTime(); //时间差的毫秒数
        let dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
        let leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
        let hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
        //计算相差分钟数
        let leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
        let minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
        //计算相差秒数
        let leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
        let seconds = Math.round(leave3 / 1000);
        console.log(
          " 相差 " +
            dayDiff +
            "天 " +
            hours +
            "小时 " +
            minutes +
            " 分钟" +
            seconds +
            " 秒"
        );
        console.log(
          dateDiff + "时间差的毫秒数",
          dayDiff + "计算出相差天数",
          leave1 + "计算天数后剩余的毫秒数"
        );
        let timeLevel = 0;
        console.log(s);
        // return false;
        if (typeof s === "number") {
          timeLevel = s;
        } else {
          if (dayDiff >= 31) {
            timeLevel = 3;
          } else if (1 <= dayDiff && dayDiff < 31) {
            timeLevel = 2;
          } else if (dayDiff <= 0 && hours > 1) {
            timeLevel = 1;
          } else {
            timeLevel = 0;
          }
  
          this.timeLevel = timeLevel;
        }
  
        for (let i in this.query) {
          let para1 = {
            deviceId: this.query[i].deviceId,
            // idList: this.query[i].deviceSlaveId,
            timeLevel: timeLevel,
            slaveList: this.query[i].slaveList,
            startTime: this.filters.startTime,
            endTime: this.filters.endTime,
            pageNo: 1,
            pageSize: Math.ceil(20000 / this.listlength)
            // pageSize: 10
          };
  
          if (para1.slaveList == "" || para1.deviceId == "") {
            console.log("请选择设备和数据点");
            this.$message({
              message: "请选择设备和数据点",
              type: "warning"
            });
            return false;
          }
        //点击查询上传查询的数据点
          this.charloading = true;
          let userhistory = {
            dataType: this.query[i].deviceDataRecipeId,
            data: JSON.stringify(this.query[i].deviceSlaveId),
            dataUserId: JSON.parse(sessionStorage.getItem("user")).userId
          };
          user_temp_data_post(userhistory).then(s => {
            console.log(s); 
          });
  
          device_data_log_query_mutil(para1)
            .then(s => {
              console.log(s.message);
              console.log(s);
              itemnum.push(s.data);
  
              this.charloading = false;
              this.begCode(s.code, s.message);
              for (let j in s.data) {
              }
              let strs = 0; 
              console.log(s.data)
              for (let j in s.data) {
                console.log(j);
                console.log(s.data[j]);
                console.log(s.data[j][0]);
                // console.log(s.data);
                console.log(this.device_lists[j])
                this.device_listsitem.push(this.device_lists[j]);
                if(this.devicelists.length == 1){ //排序
                  this.device_listsitem = this.evlabc2(this.device_listsitem)
                }
                console.log(this.device_lists);
                console.log(s.data[j]);
                console.log(this.device_listsitem);
                this.datalist = s.data[j].length + this.datalist;
                var tum = [];
                // let strs=j.split(":");
                for (let k in s.data[j]) {
                  console.log(k)
                  console.log(s.data[j][k])
                  s.data[j][k].deviceId = this.query[0].deviceId;
                  s.data[j][k].devicename = this.query[i].name + '['+ this.device_lists[j].deviceSlaveName +']';
                  s.data[j][k].decimalAccuracy = this.query[i].slaveItem[
                    strs
                  ].decimalAccuracy;
  
                  s.data[j][k].name = this.query[i].slaveItem[strs].name;
                  s.data[j][k].pushTime = this.getLocalTime(
                    s.data[j][k][2] / 1000
                  );
                  var date = new Date(s.data[j][k].pushTime.replace(/-/g, "/"));
                  // 有三种方式获取
                  var time1 = date.getTime();
                  if (s.data[j][k].decimalAccuracy) {
                    s.data[j][k].registerVal =
                      s.data[j][k][0] /
                      Math.pow(10, s.data[j][k].decimalAccuracy);
                  }
                  s.data[j][k].registerVal = s.data[j][k][0];
                  s.data[j][k].communicateState = s.data[j][k][1];
                  if (s.data[j][k].communicateState == 0) {
                    tum.push([time1, s.data[j][k].registerVal]);
                  }
                }
                //  this.device_lists[j].devicename = s.data[j][0].devicename
                console.log(tum);
                console.log(this.device_lists[j]);
                var name = "";
                console.log(this.query[i])
                if (this.device_lists[j].name) {
                  if (this.query[i].name) {
                    name =
                      this.device_lists[j].name + "(" + this.query[i].name + ")" +'['+ this.device_lists[j].deviceSlaveName +']';
                  } else {
                    name = this.device_lists[j].name;
                  }
                }
                console.log(this.device_lists[j]);
                let num = {
                  symbolSize: 4,
                  name: name,
                  type: "line",
                  data: tum,
                  smooth: false,
                  barGap: 0,
  
                  lineStyle: {
                    type: "solid",
                    smooth: true,
                    width: 2
                    // width: 114 //default value:2
                  },
                  cient: 1
                };
                console.log(num.name);
                console.log(num);
                this.device_lists[j].count = s.data[j].length;
  
                if (s.data[j].length == 0) {
                  this.device_lists[j].latest = "";
                } else {
                  this.device_lists[j].latest =
                    s.data[j][s.data[j].length - 1].pushTime;
                }
                console.log(s.data[j][s.data[j].length - 1]);
                console.log(this.device_lists[j]);
                this.devices_name.push(name);
                console.log(this.devicesson_list);
                console.log(j)
                this.devicesson_list.push(s.data[j]);
                this.devices_series.push(num);this.device_lists[j]
                console.log(this.device_listsitem);
                console.log(this.devicesson_list);
                console.log(this.devices_series);
                // this.devices_series[i][j] = num;
                this.tableData.push(s.data[j]);
                this.son_slice(this.tableData);
                this.namelist++;
                this.drawColumnChart();
  
                strs++;
              }
            })
            .catch(() => {
              this.charloading = false;
            });
        }
        // })
        for (let i in this.templist) {
          let num = {
            id: this.templist[i].id
          };
          console.log(num);
          user_temp_data_delete(num).then(s => {
            console.log(s);
          });
        }
  
        console.log(12);
      },
      //删除
      son_slice() {
        this.devicesson_list = "";
        let tosize1 = 50 * (this.devicesson_size - 1);
        let tosize2 = 50 * this.devicesson_size;
        let data = [];
        this.total = [];
        if (this.tableData) {
          for (let i in this.tableData) {
            // this.total[i] = this.tableData[i].length;
            this.total.push(this.tableData[i].length);
            // data[i] = this.tableData[i].slice(tosize1, tosize2);
            data.push(this.tableData[i].slice(tosize1, tosize2));
          }
        }
        this.devicesson_list = data;
        console.log(this.devicesson_list);
      },
  
      //显示编辑界面
      handleEdit: function(index, row) {
        let para = {
          id: row.id
        };
  
        alarm_log_get(para).then(res => {
          this.begCode(res.code, res.message);
  
          if (res.code == 0) {
            this.editLoading = false;
            //NProgress.done();
            this.editFormVisible = true;
            this.editForm.id = res.data.id;
            this.editForm.remark = res.data.remark;
            this.editForm.state = res.data.state.toString();
          }
        });
      },
      //显示新增界面
      handleAdd: function() {
        this.addFormVisible = true;
        this.addForm = {
          name: "",
          sex: -1,
          age: 0,
          birth: "",
          addr: ""
        };
      },
      //编辑
  
      //新增
  
      selsChange: function(sels) {
        this.sels = sels;
      },
      addresslist(s) {
        this.address = "";
        this.cityDatas = this.cityData[this.area].children;
      },
      //批量删除
  
      devicelistget() {
        this.sbshow = !this.sbshow
        this.devicelists = [];
        if (this.cityData[this.area]) {
          this.filter.address = this.cityData[this.area].text + this.address;
        }
        let para = {
          pageSize: 9999,
          pageNo: this.page,
          name: this.filter.name,
          deviceTypeId: this.filter.deviceTypeId,
          deviceSn: this.filter.deviceSn,
          deviceModelId: this.filter.deviceModelId,
          terminalUser: this.terminalUser,
          guild: this.filter.guild,
          address: this.filter.address,
          companyId: this.scade1s,
          deviceUserId: this.scades,
          mini: false,
          miniLev: 4
        };
        this.listLoading = true;
        //NProgress.start();
        device_query(para).then(res => {
          this.begCode(res.code, res.message);
  
          this.devicelist = res.data.list;
          this.second();
          //NProgress.done();
        });
      },
      chartSize() {
        console.log(12);
        this.chartColumn.resize();
      },
      initialize() {
        let para = {
          pageNo: 1,
          pageSize: 9999,
          type: 0,
  
          authType: 0
        };
        let parauser = {
          pageNo: 1,
          pageSize: 9999,
          type: 1,
  
          authType: 0
        };
        let para3 = {
          pageNo: 1,
          pageSize: 9999,
          companyId: this.scade1s
        };
        //NProgress.start();
        terminal_user_query(para3).then(res => {
          this.begCode(res.code, res.message);
          this.terminal_list = res.data.list;
          console.log(this.terminal_list);
          // this.filters.terminalUser = '';
          //NProgress.done();
        });
        // user_query(para).then(res => {
        //   this.begCode(res.code, res.message);
        //   this.userclist = res.data.list;
        //   // if (this.userclist[0]) {
  
        //   //     this.scade = this.userclist[0].userId;
        //   // }
        //   this.scade = this.userID;
        // });
        user_querycompany(parauser).then(res => {
          this.begCode(res.code, res.message);
          this.firmlist = res.data.list;
        });
      }
    },
    beforeDestroy() {
      // echarts.clear();
    },
    destroyed() {
      sessionStorage.removeItem("pointid");
    },
  
    mounted() {
      let _this = this;
      
      _this.getGroup();
      function isFullscreen() {
        return (
          document.fullscreenElement ||
          document.msFullscreenElement ||
          document.mozFullScreenElement ||
          document.webkitFullscreenElement ||
          false
        );
      }
      window.addEventListener("resize", () => {
        // console.log(isFullscreen())
        if (isFullscreen() == false) {
          _this.toolboxText = "全屏显示";
          _this.toolboxImg = "path://M186.527451 117.613714h-0.073142l147.017142-0.658285c21.723429 0.585143 41.837714-15.652571 45.129143-43.227429V43.885714C378.161737 20.406857 360.095451 1.024 338.372023 0.512L57.796023 2.194286C57.284023 2.267429 56.991451 2.048 56.625737 2.048L36.950309 1.609143A35.84 35.84 0 0 0 9.521737 13.458286C2.353737 21.065143-0.206263 31.597714 0.013166 43.373714l2.048 21.211429c0 0.438857-1.462857 0.731429-1.462857 1.170286l1.097142 303.689142c0.512 23.405714 18.505143 37.449143 40.228572 38.034286h29.257143c21.723429 0.512 39.058286-19.894857 38.546285-43.300571l-1.243428-165.156572L302.093166 404.041143c20.992 22.674286 55.076571 22.674286 76.068571 0a61.44 61.44 0 0 0 0-82.066286L186.527451 117.613714zM1021.233737 954.221714c0-0.512 1.462857-0.804571 1.462857-1.170285l-1.170285-299.081143c-0.585143-23.405714-18.505143-37.376-40.228572-37.888h-27.721143c-21.650286-0.585143-38.985143 19.821714-38.4 43.227428l1.243429 161.645715-193.536-206.409143a50.980571 50.980571 0 0 0-76.068572 0 61.293714 61.293714 0 0 0 0 82.139428l193.462858 206.262857-146.797715 0.585143c-21.723429-0.512-41.837714 13.897143-45.202285 41.472v29.842286c0.585143 23.405714 18.578286 42.861714 40.228571 43.446857l277.138286-1.828571c0.438857 0 0.731429 0.219429 1.097143 0.219428l19.602285 0.512a35.84 35.84 0 0 0 27.648-11.922285c7.094857-7.460571 9.581714-18.066286 9.362286-29.842286l-2.194286-21.211429zM378.161737 614.546286a50.980571 50.980571 0 0 0-76.068571 0l-193.609143 205.092571 1.243428-162.669714c0.512-23.405714-16.822857-43.885714-38.4-43.300572h-29.257142c-21.796571 0.585143-39.789714 14.555429-40.228572 38.034286l-1.170286 301.202286c0 0.438857 1.462857 0.731429 1.462858 1.170286l-2.121143 21.211428c-0.219429 11.776 2.340571 22.381714 9.362285 29.842286a35.84 35.84 0 0 0 27.501715 11.922286l19.748571-0.512c0.365714 0 0.658286-0.219429 1.097143-0.219429l280.649143 1.828571c21.723429-0.585143 39.716571-19.968 40.228571-43.446857v-29.842285c-3.291429-27.648-23.405714-41.984-45.129143-41.472l-148.699428-0.512 193.389714-206.262858a61.366857 61.366857 0 0 0 0-82.066285zM1013.992594 13.458286a35.766857 35.766857 0 0 0-27.574857-11.849143l-19.602286 0.512c-0.438857 0-0.731429 0.146286-1.170285 0.219428L684.630309 0.512C662.833737 1.097143 644.913737 20.48 644.401737 43.885714v29.915429c3.291429 27.648 23.478857 43.812571 45.129143 43.227428l149.211429 0.731429-191.634286 204.361143a61.147429 61.147429 0 0 0-0.146286 81.92c21.065143 22.747429 55.076571 22.747429 76.068572 0l193.536-206.262857-1.243429 166.4c-0.512 23.405714 16.822857 43.885714 38.473143 43.373714h27.648c21.723429-0.658286 39.716571-14.628571 40.228571-38.034286L1022.696594 65.828571c0-0.438857-1.462857-0.731429-1.462857-1.170285l2.194286-21.211429c0.219429-11.776-2.340571-22.381714-9.435429-29.915428z"
  
          _this.drawColumnChart();
        } else {
          _this.toolboxText = "取消全屏显示";
          _this.toolboxImg = "path://M883.138896 944.458281v-95.818015l156.169033 155.583229a63.199004 63.199004 0 0 0 44.878372 18.707182 63.20166 63.20166 0 0 0 44.883687-18.707182c24.818929-24.915899 24.818929-65.207472 0-90.126027l-155.443753-155.588543h95.598838c44.012287 0 79.691822-35.676878 79.691822-79.689166 0-44.013616-35.679535-79.690494-79.691822-79.690494h-291.905355a52.760814 52.760814 0 0 0-37.691989 15.327854 52.732918 52.732918 0 0 0-15.58024 37.583064V944.458281c0 43.929929 35.611789 79.54039 79.545703 79.540391 43.928601 0 79.545704-35.610461 79.545704-79.540391zM391.972769 79.50851v95.818016L235.803736 19.743296a63.197675 63.197675 0 0 0-89.762059 0c-24.824242 24.937152-24.824242 65.255293 0 90.197758l155.443753 155.588543h-95.600166C161.871648 265.530926 126.193441 301.209132 126.193441 345.22142s35.678207 79.690494 79.690494 79.690494h291.905355a52.768784 52.768784 0 0 0 53.273558-52.910918V79.581569c0.021254-43.928601-35.574595-79.561644-79.50851-79.581569-43.928601-0.01594-79.560315 35.579909-79.581569 79.50851zM973.627563 265.493732L1129.069988 109.905189c24.818929-24.917227 24.818929-65.2088 0-90.126028a63.196347 63.196347 0 0 0-89.762059 0L883.138896 175.363719v-95.818015c0-43.928601-35.617103-79.545704-79.547032-79.545704-43.932586 0-79.545704 35.617103-79.545704 79.545704V371.965131a52.758157 52.758157 0 0 0 53.272229 52.905604h291.905355c44.012287 0 79.693151-35.678207 79.693151-79.690494 0-44.006974-35.680863-79.685181-79.693151-79.685181h-95.596181zM497.78929 599.130594h-291.905355c-44.012287 0-79.690494 35.676878-79.690494 79.690494 0 44.012287 35.678207 79.689166 79.690494 79.689165h95.600166l-155.443752 155.588543c-24.818929 24.918555-24.818929 65.210129 0 90.124699a63.189705 63.189705 0 0 0 89.762059 0l156.169032-155.583229V944.458281c0 43.931258 35.617103 79.541719 79.545704 79.541719 43.933914 0 79.545704-35.610461 79.545704-79.541719V652.041511a52.73956 52.73956 0 0 0-15.581569-37.583064 52.76347 52.76347 0 0 0-37.691989-15.327853z"
          _this.drawColumnChart();
        }
      });
  
      _this.usertype = JSON.parse(sessionStorage.getItem("user")).type;
      this.devicelistget();
      console.log(this.componentDeviceId);
      if(this.componentDeviceId){
        this.devicelists = [this.componentDeviceId]
        this.query[0].deviceId = this.componentDeviceId
      }
      this.initialize();
      let para3 = {
        pagenum: 1,
        pageSize: 1000
      };
      unit_query(para3).then(res => {
        console.log(res);
        this.unitList = res.data.list;
      });
      this.cityData = cityData;
      let para = {
        pageNo: 1,
        pageSize: 9999,
        type: 0
      };
      device_model_query(para).then(res => {
        this.begCode(res.code, res.message);
        this.modellist = res.data.list;
        //NProgress.done();
      });
      device_type_query(para).then(res => {
        this.begCode(res.code, res.message);
        this.typelist = res.data.list;
        //NProgress.done();
      });
      this.industry = JSON.parse(localStorage.getItem("pb_industry"));
      // let to=this.getUrlKey('code');
      if (this.$route.path == "/hdpihistry") {
        this.hdpishow = true;
      }
      let start1 = new Date();
      let start2 = new Date();
      start1.setTime(start1.getTime() - 3600 * 1000 * 1 * 1);
      start2.setTime(start2.getTime());
  
      this.value4 = [this.getdata(start1), this.getdata(start2)];
      this.filters.startTime = this.getdata(start1);
      this.filters.endTime = this.getdata(start2);
  
      //查询搜索记录
      user_temp_data_query(para).then(res => {
        console.log(res)
        this.begCode(res.code, res.message);
        // this.templist = res.data.list;
        for (let i in res.data.list) {
          if (
            JSON.parse(sessionStorage.getItem("user")).userId ==
            res.data.list[i].dataUserId
          ) {
            this.templist.push(res.data.list[i]);
          }
        }
      });
      
      if (
        sessionStorage.getItem("facility_details") &&
        sessionStorage.getItem("pointname")
      ) {
        this.query[0].name = sessionStorage.getItem("pointname");
        console.log(this.query);
        console.log(this.devicelists);
        if(!this.componentDeviceId){
          this.devicelists = [];
          this.devicelists = [sessionStorage.getItem("facility_details")];
        }
        this.query[0].deviceId = sessionStorage.getItem("facility_details");
        if (sessionStorage.getItem("pointid") && sessionStorage.getItem('facility_details')) {
          this.query[0].deviceSlaveId = [sessionStorage.getItem("pointid")];
          this.query[0].deviceDataRecipeId = sessionStorage.getItem("deviceDataRecipeId");
          this.query[0].slaveList = [{
              slaveSn: sessionStorage.getItem("pointslaveSn"),
              register: sessionStorage.getItem("pointid").split("~")[1]
          }];
          sessionStorage.removeItem("pointslaveSn");
        }
        // this.getUsers();
      }
    }
  };
  </script>
  
  <style scoped>
  #allmap {
    height: 300px;
    overflow: hidden;
  }
  
  .el-tag--info,
  .el-tag--info .el-tag__close {
    color: #000;
  }
  
  .el-tabs--border-card > .el-tabs__header {
    background-color: #f5f7fa !important;
    border-bottom: 1px solid #e4e7ed !important;
    margin: 0 !important;
  }
  
  .el-tabs--border-card {
    background: #fff;
    border: 1px solid #dcdfe6;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
      0 0 6px 0 rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
  }
  
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    color: #409eff;
    background-color: #fff;
    border-right-color: #dcdfe6;
    border-left-color: #dcdfe6;
  }
  
  /* :-webkit-full-screen {  
    background-color: #fff !important;  
  } */
  
  #chartColumn:-webkit-full-screen {
    background-color: #fff !important;
  }
  
  #scatterChina:-moz-full-screen {
    background-color: #fff !important;
  }
  
  #scatterChina:-ms-fullscreen {
    background-color: #fff !important;
  }
  #scatterChina:fullscreen {
    background-color: #fff !important;
  }
  /* #chartColumn>div{
    margin: 100px auto !important;
  } */
  .filter {
    /* position: absolute;
    top: 0;
    right: 0; */
    display: inline-block;
    background-color: #0099cc;
    color: #fff;
    /* margin-right: 10%;
    margin-bottom: 15px; */
    /* padding: 5px 8px; */
    padding: 9px 20px;
    cursor: pointer;
    border-radius: 5px;
    transform: translateY(10px);
  }
  .filter:hover {
    background-color: #409eff;
  }
  </style>